<!--  -->
<template>
  <div class="detail">
    <div class="navheader">
      <img src="../assets/img/icon-back.png" class="back" @click="backHome" />
      <div class="title">课程详情</div>
    </div>
    <div class="course-thumb">
      <img :src="thumb" width="100%" mode="widthFix" />
    </div>
    <div class="course-title">{{ title }}</div>
    <div class="stat">
      <div v-if="is_free == 0" class="item charge"><span class="small">￥</span>{{ charge }}</div>
      <div v-else class="item charge"><span class="free">免费</span></div>
      <div class="item user-count">
        <span>{{ user_count }}人已订阅</span>
      </div>
    </div>
    <div class="line"></div>
    <div class="body">
      <div class="tabs">
        <div
          class="item-tab"
          v-for="(item, index) in titleList"
          :key="item"
          @click="change(index)"
          :class="{ active: current == index }"
        >
          {{ item }}
          <div v-if="current == index" class="actline"></div>
        </div>
      </div>
      <div class="coursr-desc" v-show="current == 0">
        <div class="desc" style="font-size: 14px" v-html="course.render_desc"></div>
      </div>
      <div class="course-chapter-box" v-show="current == 1">
        <div class="chapter-item" v-for="item in chapters" :key="item.id">
          <div class="chapter-name">
            {{ item.title }}
            <img
              width="15"
              height="15"
              src="../assets/img/icon-back.png"
              class="normaltran trans"
              style="float: right; cursor: pointer"
            />
          </div>
          <div class="chapter-videos-box" v-for="item in videos[`${item.id}`]" :key="item.id">
            <div class="video-item">
              <div class="video-title">
                <span class="free">试看</span><span class="text">{{ item.title }}</span>
              </div>
              <div class="video-duration">
                <span>02:00</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="course-comments-box" v-show="current == 2">
        <div class="comment-item" v-for="item in commentList" :key="item.id">
          <div class="avatar">
            <img :src="userList[item.user_id].avatar" width="32" height="32" />
          </div>
          <div class="content">
            <div class="nickname">{{ userList[item.user_id].nick_name }}</div>
            <div class="time">{{ changeTime(item.created_at) }}</div>
            <div class="text">
              <div>{{ item.render_content }}</div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="current != 2" class="bottom-bar">
        <div class="collect-button active">
          <div class="icon">
            <img width="24" height="24" src="../assets/img/collect-active.png" class="like-icon" />
          </div>
          <div class="text">收藏</div>
        </div>
        <div class="see-button button-item">
          <span>开始学习</span>
        </div>
      </div>
      <div v-else class="bottom-bar">
        <div class="input">
          <input
            type="text"
            placeholder-style="color:#CCC"
            placeholder="请输入评论内容"
            v-model="comment"
          />
        </div>
        <div class="comment-button" @click="send">发布</div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      comment: "",
      thumb: "",
      title: "",
      user_count: "",
      is_free: 0,
      charge: 0,
      current: 0,
      titleList: ["介绍", "目录", "评论"],
      course: [],
      chapters: [],
      videos: {},
      // chapters_id: [],
      // videos_id: [],
      commentList: [],
      userList: {},
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    backHome() {
      // this.$router.push({
      //   name: "home",
      // });
      this.$router.go(-1);
    },
    change(index) {
      this.current = index;
    },
    async send() {
      // api/v2/course/13/comment
      let res = await this.$request.post(`api/v2/course/${this.$route.query.id}/comment`, {
        content: this.comment,
      });
      let comment = await this.$request.get(`api/v2/course/${this.$route.query.id}/comments`);
      this.commentList = comment.data.comments;
      this.userList = comment.data.users;
      if (res.code == 0) {
        this.comment = "";
      }
    },
    changeTime(time) {
      let date = new Date(time);
      let res = this.friendlyDate(date.getTime());
      return res;
    },
    friendlyDate(timestamp) {
      var formats = {
        year: "%n% 年前",
        month: "%n% 月前",
        day: "%n% 天前",
        hour: "%n% 小时前",
        minute: "%n% 分钟前",
        second: "%n% 秒前",
      };

      var now = Date.now();
      var seconds = Math.floor((now - timestamp) / 1000);
      var minutes = Math.floor(seconds / 60);
      var hours = Math.floor(minutes / 60);
      var days = Math.floor(hours / 24);
      var months = Math.floor(days / 30);
      var years = Math.floor(months / 12);

      var diffType = "";
      var diffValue = 0;
      if (years > 0) {
        diffType = "year";
        diffValue = years;
      } else {
        if (months > 0) {
          diffType = "month";
          diffValue = months;
        } else {
          if (days > 0) {
            diffType = "day";
            diffValue = days;
          } else {
            if (hours > 0) {
              diffType = "hour";
              diffValue = hours;
            } else {
              if (minutes > 0) {
                diffType = "minute";
                diffValue = minutes;
              } else {
                diffType = "second";
                diffValue = seconds === 0 ? (seconds = 1) : seconds;
                if (seconds <= 1) {
                  return "刚刚";
                }
              }
            }
          }
        }
      }
      return formats[diffType].replace("%n%", diffValue);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    let res = await this.$request.get(`api/v2/course/${this.$route.query.id}`);
    this.thumb = res.data.course.thumb;
    this.title = res.data.course.title;
    this.user_count = res.data.course.user_count;
    this.is_free = res.data.course.is_free;
    this.charge = res.data.course.charge;
    this.course = res.data.course;
    this.chapters = res.data.chapters;
    this.videos = res.data.videos;
    // res.data.chapters.forEach((element) => {
    //   this.chapters_id.push(element.id);
    //   console.log(element.id);
    //   this.videos_id = res.data.videos[element.id].id;
    // });
    let comment = await this.$request.get(`api/v2/course/${this.$route.query.id}/comments`);
    this.commentList = comment.data.comments;
    this.userList = comment.data.users;
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less">
.detail {
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  .navheader {
    position: fixed;
    top: 0;
    width: 100%;
    height: 50px;
    background-color: #fff;
    z-index: 100;
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    border-bottom: 1px solid #f1f2f6;
    box-sizing: border-box;
    .back {
      position: absolute;
      left: 15px;
      top: calc(50% - 9.5px);
      width: 19px;
      height: 19px;
    }
    .title {
      width: 72%;
      height: auto;
      font-size: 17px;
      font-weight: 500;
      text-align: center;
      color: #333;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 49px;
    }
  }
  .course-thumb {
    width: 100%;
    height: auto;
    // float: left;
    margin-top: 50px;
    img {
      width: 100%;
    }
  }

  .course-title {
    box-sizing: border-box;
    padding: 15px 15px 0 15px;
    font-size: 15px;
    font-weight: 500;
    color: #171923;
    word-break: break-all;
    line-height: 15px;
    background-color: #fff;
  }

  .stat {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 20px 15px 15px 15px;
    font-size: 20px;
    line-height: 30px;
    background-color: #fff;
    .item.charge {
      display: inline;
      color: #ff4d4f;
      font-weight: 500;
      span.small {
        font-size: 14px;
      }
      span.free {
        font-size: 18px;
        color: #04c877 !important;
        margin-right: 15px;
      }
    }

    .item.user-count {
      display: inline;
      color: #999;
      font-weight: 400;
      font-size: 14px;
      span {
        color: #999;
        font-weight: 400;
        font-size: 14px;
      }
    }
  }

  .line {
    width: 100%;
    height: 10px;
    float: left;
    background-color: #f6f6f6;
    box-sizing: border-box;
  }
  .body {
    box-sizing: border-box;
    padding-bottom: 53px;
    width: 100%;
    .tabs {
      width: 100%;
      height: 55px;
      float: left;
      position: sticky;
      top: 0;
      box-sizing: border-box;
      padding-top: 10px;
      z-index: 999;
      background: #fff;
      box-shadow: 0 2px 4px 0 hsl(0deg 0% 80% / 20%);
      display: flex;
      flex-direction: row;
      position: relative;
      justify-content: space-between;
      padding: 20px 80px;
      .item-tab.active {
        font-weight: 600;
        color: #3ca7fa;
        .actline {
          font-weight: 600;
          color: #3ca7fa;
        }
      }

      .item-tab {
        display: inline-block;
        width: auto;
        height: 15px;
        font-size: 15px;
        font-weight: 400;
        color: #333;
        line-height: 15px;
        cursor: pointer;
        position: relative;
        .actline {
          width: 20px;
          height: 3px;
          background: #3ca7fa;
          border-radius: 3px;
          position: absolute;
          left: 5px;
          top: 25px;
        }
      }
    }
    .coursr-desc {
      width: 100%;
      height: auto;
      float: left;
      color: #333;
      line-height: 21px;
      box-sizing: border-box;
      padding: 20px 15px 15px 15px;
      .desc {
        width: 100%;
        p {
          margin: 0;
          img {
            width: 100%;
            height: auto;
          }
        }
      }
    }
    .course-chapter-box {
      padding: 10px 15px 15px 15px;
      margin-bottom: 53px;
      width: 100%;
      height: auto;
      float: left;
      color: #333;
      line-height: 21px;
      box-sizing: border-box;
      .chapter-item {
        width: 100%;
        height: auto;
        float: left;
        .chapter-name {
          width: 100%;
          height: auto;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 15px;
          color: #333;
          font-weight: 700;
          margin-bottom: 20px;
          margin-top: 10px;

          img.normaltran.trans {
            transform: rotate(270deg);
            float: right;
            cursor: pointer;
          }
        }

        .chapter-videos-box {
          display: block;
          width: 100%;
          height: auto;
          float: left;
          line-height: 21px;
          .video-item {
            width: 100%;
            height: auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
            line-height: 36px;
            box-sizing: border-box;
            padding: 0 10px 0 10px;
            background: #f6f6f6;
            border-radius: 4px;
            .video-title {
              flex: 1;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              font-size: 14px;
              color: #333;
              span.free {
                padding: 2px 4px;
                background-color: #04c877;
                border-radius: 2px;
                color: #fff;
                font-size: 12px;
                margin-right: 10px;
              }

              span.text {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 14px;
                color: #333;
              }
            }

            .video-duration {
              width: auto;
              height: auto;
              font-size: 12px;
              margin-left: 10px;
              color: #999;
              span {
                width: auto;
                height: auto;
                font-size: 12px;
                margin-left: 10px;
                color: #999;
                line-height: 36px;
              }
            }
          }
        }
      }
    }
    .course-comments-box {
      width: 100%;
      height: auto;
      float: left;
      color: #333;
      line-height: 21px;
      box-sizing: border-box;
      padding: 20px 15px 15px 15px;
      margin-bottom: 50px;
      .comment-item {
        width: 100%;
        height: auto;
        float: left;
        margin-top: 0;
        margin-bottom: 30px;
        display: flex;
        .avatar {
          width: 30px;
          height: 30px;
          margin-right: 10px;
          img {
            width: 32px;
            height: 32px;
            border-radius: 50%;
          }
        }

        .content {
          flex: 1;
          position: relative;
          .nickname {
            width: 100%;
            height: auto;
            float: left;
            font-size: 12px;
            box-sizing: border-box;
            color: #999;
            margin-top: 5px;
            margin-bottom: 13px;
          }

          .time {
            position: absolute;
            font-size: 10px;
            color: #999;
            right: 15px;
            top: 6px;
          }

          .text {
            width: 100%;
            height: auto;
            float: left;
            font-size: 14px;
            line-height: 1.2;
            color: #333;
            div {
            }
          }
        }
      }
    }
  }
  .bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 11;
    width: 100%;
    height: 53px;
    background-color: #fff;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
    .collect-button.active {
      width: 25px;
      height: auto;
      margin-right: 15px;
      .icon {
        color: #ffc219;
        img.like-icon {
          display: inline-block;
        }
      }

      .text {
        width: 100%;
        height: 25px;
        float: left;
        line-height: 25px;
        font-size: 10px;
        font-weight: 400;
        color: #666;
        text-align: center;
      }
    }

    .see-button.button-item {
      border-radius: 3px;
      background-color: #3ca7fa;
      color: #fff;
      flex: 1;
      display: block;
      text-align: center;
      margin: 4px 0;
      line-height: 40px;
      font-size: 15px;
      font-weight: 500;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        color: #fff;
      }
    }
    .input {
      flex: 1;
      padding-top: 10px;
      input {
        width: 100%;
        height: 22px;
        font-size: 14px;
        font-weight: 400;
        color: #333;
        line-height: 22px;
        box-sizing: border-box;
        margin-top: 8px;
        border: none;
      }
    }

    .comment-button {
      width: auto;
      height: 33px;
      font-size: 14px;
      font-weight: 400;
      color: #666;
      line-height: 33px;
      padding-left: 15px;
      padding-top: 10px;
    }
  }
}
</style>
